웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[puppeteer] e2e 테스트시 evaluate() 내부에서 console.log 사용하는 방법
Last Modified : 2023-12-04 / Created : 2023-12-04node환경의 e2e 테스트를 위해서 puppeteer를 사용하는 경우 클릭 및 DOM 요소 접근 등을 위해 page.evaluate() 함수를 사용합니다. 이 때 console.log()를 실행할 경우 실행한 node.js 환경에서는 확인할 수가 없는데요 ~ 이를 확인하기 위한 방법을 알아봅니다.
방법을 알아보기에 앞서서 왜 console.log() 결과가 안나올까요? 그 이유는 puppeteer의 evaluate() 함수는 브라우저 컨텍스트 내부에서 동작하기 때문입니다. 그래서 node.js에서 콘솔 로그를 직접적으로 확인하기 어려운 것이죠.
그래서 확인하기 위한 방법은 몇 가지가 있습니다. 그 중에서 가장 간단한 방법은 아래의 두 가지입니다.
1. Non-headless 모드에서 확인하기
2. console 이벤트 리스터를 추가하기
위 방법을 각각 하나씩 알아보겠습니다.
첫 번째 방법은 Non-headless 모드를 사용하는 방법입니다. 이 방법이 가장 빠르고 쉬운 방법인데요. 단순하게 옵션만 변경하면 되기 때문이죠. 실행 옵션에 headless: false를 추가하여 크로미움(chromium) 브라우저를 볼 수 있도록 변경합니다.
이제 브라우저의 Chrome DevTools를 열어서 해당 콘솔 로그를 확인할 수 있죠. 가장 빠르게 확인 가능하므로 간단한 로그 확인이라면 가장 추천하는 방법입니다.
이번 방법은 console의 이벤트 리스너를 추가하여 콘솔 이벤트가 발생할 때마다 그 내용을 출력하도록 만드는 방법입니다. 이를 위해서 아래와 같이 이벤트리스너를 등록할 수 있습니다. 아래 예제는 만약 .my-table 이름의 테이블 태그가 존재하는 경우 그 테이블의 행 갯수를 console.log()에 출력하는 예제입니다.
이제 코드를 실행하면 page.evaluate() 내부의 콘솔로그를 node.js 화면에서 확인할 수 있게됩니다.
@ 또 다른 방법은 없을까?
만약 다른 방법도 궁금하다면 Puppeteer를 띄울 때 Chrome DevTools를 다른 창으로 띄우는 방법도 존재합니다. 이 방법은 특정 포트를 사용하여 DevTools를 띄우고 여기서 콘솔로그를 확인할 수 있는 방법입니다. 다만 이 경우에도 반드시 headless: false로 설정해야만 합니다.
여기까지 e2e테스트를 목적의 puppeteer page.evaluate() 내부에서 콘솔로그를 출력하는 방법을 간략하게 알아보았습니다. 가급적이면 e2e 테스트 코드를 간단하고 명확하게 작성하고 싶지만 생각처럼 쉽지는 않더라구요. 아무래도 많이 할수록 점점 더 익숙해지고 쉬워지는 것 같습니다.
Puppeteer page.evaluate() 함수에서 console.log() 사용 방법
방법을 알아보기에 앞서서 왜 console.log() 결과가 안나올까요? 그 이유는 puppeteer의 evaluate() 함수는 브라우저 컨텍스트 내부에서 동작하기 때문입니다. 그래서 node.js에서 콘솔 로그를 직접적으로 확인하기 어려운 것이죠.
그래서 확인하기 위한 방법은 몇 가지가 있습니다. 그 중에서 가장 간단한 방법은 아래의 두 가지입니다.
1. Non-headless 모드에서 확인하기
2. console 이벤트 리스터를 추가하기
위 방법을 각각 하나씩 알아보겠습니다.
1. Non-headless 모드로 콘솔 로그 확인하기
첫 번째 방법은 Non-headless 모드를 사용하는 방법입니다. 이 방법이 가장 빠르고 쉬운 방법인데요. 단순하게 옵션만 변경하면 되기 때문이죠. 실행 옵션에 headless: false를 추가하여 크로미움(chromium) 브라우저를 볼 수 있도록 변경합니다.
const browser = await puppeteer.launch({
headless: false,
});
headless: false,
});
이제 브라우저의 Chrome DevTools를 열어서 해당 콘솔 로그를 확인할 수 있죠. 가장 빠르게 확인 가능하므로 간단한 로그 확인이라면 가장 추천하는 방법입니다.
2. console 이벤트 리스너를 추가하기
이번 방법은 console의 이벤트 리스너를 추가하여 콘솔 이벤트가 발생할 때마다 그 내용을 출력하도록 만드는 방법입니다. 이를 위해서 아래와 같이 이벤트리스너를 등록할 수 있습니다. 아래 예제는 만약 .my-table 이름의 테이블 태그가 존재하는 경우 그 테이블의 행 갯수를 console.log()에 출력하는 예제입니다.
(async () => {
const page = await browser.newPage();
page.on('console', (msg) => console.log('페이지 로그:', msg.text()));
await page.evaluate(() => {
const table = document.querySelector('.my-table');
const rowsLength = table ? table.rows.length : 0;
console.log('Number of rows in the table:', rowsLength);
});
});
const page = await browser.newPage();
page.on('console', (msg) => console.log('페이지 로그:', msg.text()));
await page.evaluate(() => {
const table = document.querySelector('.my-table');
const rowsLength = table ? table.rows.length : 0;
console.log('Number of rows in the table:', rowsLength);
});
});
이제 코드를 실행하면 page.evaluate() 내부의 콘솔로그를 node.js 화면에서 확인할 수 있게됩니다.
@ 또 다른 방법은 없을까?
만약 다른 방법도 궁금하다면 Puppeteer를 띄울 때 Chrome DevTools를 다른 창으로 띄우는 방법도 존재합니다. 이 방법은 특정 포트를 사용하여 DevTools를 띄우고 여기서 콘솔로그를 확인할 수 있는 방법입니다. 다만 이 경우에도 반드시 headless: false로 설정해야만 합니다.
const browser = await puppeteer.launch({
headless: false, // non-headless 설정이 필요
args: ['--remote-debugging-port=9222']
});
headless: false, // non-headless 설정이 필요
args: ['--remote-debugging-port=9222']
});
마치면서
여기까지 e2e테스트를 목적의 puppeteer page.evaluate() 내부에서 콘솔로그를 출력하는 방법을 간략하게 알아보았습니다. 가급적이면 e2e 테스트 코드를 간단하고 명확하게 작성하고 싶지만 생각처럼 쉽지는 않더라구요. 아무래도 많이 할수록 점점 더 익숙해지고 쉬워지는 것 같습니다.
아래의 글도 찾고 계시지 않나요?
